﻿<!DOCTYPE html>

<html>
<head>
    <title>WRF Namelist.Input Editor Test</title>
    <meta charset="utf-8" />
    <meta name="description" content="WRF Namelist.Input Editor Test" />
    <meta name="keywords" content="WRF,WPS,WRF Domain Wizard, namelist.input" />
    <meta name="author" content="Jiri Richter" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/all.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap-select.min.css" />

    <link rel="stylesheet" href="{{baseUrl}}/css/wrf-domain-wizard.css?{{timestamp}}" />

    <link rel="icon" href="{{baseUrl}}/img/globe_32x32.png" />
</head>
<body>

    <div class="d-flex" style="height: 100%; width: 100%;">
        <div id ="main" class="m-auto d-flex flex-column">

            <div id="page-loader" class="loader-1 m-auto" style="width: 100px; height: 100px; display: none;"></div>

            <div id="github-examples" class="list-group" style="display: none;">
                <div class="list-group-item list-group-item-primary d-flex flex-row">
                    <div>EM_REAL Examples</div>
                    <div class="ml-auto">
                        <a href="https://github.com/wrf-model/WRF/tree/master/test/em_real" target="_blank"><i class="fab fa-github"></i></a>
                    </div>
                </div>
            </div>

            <div id="open-namelist" class="d-flex m-2">
                <button type="button" id="button-open" class="btn btn-outline-secondary m-auto"><i class="far fa-folder-open"></i><span class="ml-2">Open namelist.input</span></button>
                <input id="file-open" type="file" style="display: none;" />
            </div>
        </div>
    </div>

    {{dialog.message-box}}

    {{dialog.namelist-input}}

    <script src="{{baseUrl}}/lib/jquery.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap.bundle.min.js"></script>
    <script src="https://spin.js.org/spin.umd.js"></script>
    <script src="{{baseUrl}}/lib/immediate.min.js"></script>
    <script src="{{baseUrl}}/lib/proj4.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.spin.min.js"></script>
    <script src="{{baseUrl}}/lib/leaflet-sidebar.min.js"></script>
    <script src="{{baseUrl}}/lib/leaflet-providers.js"></script>
    <script src="{{baseUrl}}/lib/Blob.js"></script>
    <script src="{{baseUrl}}/lib/FileSaver.min.js"></script>
    <script src="{{baseUrl}}/lib/html-to-image.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.textpath.js"></script>
    <script src="{{baseUrl}}/lib/moment.min.js"></script>
    <script src="{{baseUrl}}/lib/moment-timezone-with-data.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap-datetimepicker.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap-select.min.js"></script>

    <script src="{{baseUrl}}/js/wrf-domain-wizard.js"></script>

    <script type="module">

        WRF.enableGlobalErrorHandler();

        var page = new WRF.NamelistInputPage({
            jsonBaseUrl: '{{baseUrl}}/json'
        });

        if (location.hash && (location.hash === "#test" || location.hash.startsWith("#namelist."))) {
            await page.loadGitHubExamplesAsync();
        }
    </script>
</body>
</html>